<%@ page import="java.util.ArrayList" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.example.wanmengnovel.Novels" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到 - 挽梦言句</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="<%=request.getContextPath()%>/css/loginKuang.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/revelMain.css" rel="stylesheet">
<!--阶段一：先能够登录注册-->
<body>
<!-- 头部放置导航栏 -->
<header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">挽梦言句</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 position-absolute top-50 end-0 translate-middle-yposition-absolute top-50 end-0 translate-middle-y"
                    style="padding-right: 20px">
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="login-btn">登录</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="enroll.jsp">注册</a>
                    </li>
                </ul>
                <ul class=" position-absolute top-50 start-50 translate-middle">
                    <form action="<%=request.getContextPath()%>/can-not-find" method="post" class="d-flex" role="search">
                        <input name="value" class="form-control me-2" type="search" placeholder="您要查找的内容" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit" style="width: 100px">搜索</button>
                    </form>
                </ul>


            </div>
        </div>
    </nav>
    <!--    点击登录后弹出的登录框-->
    <div id="login-popup" class="popup">
        <div class="popup-content">
            <span class="close-btn" id="close-btn">&times;</span>
            <h2>登录</h2>
            <form id="login-form" action="<%=request.getContextPath()%>/login" method="post">
                <div class="contents">
                    <label>账号:</label>
                    <input type="text" name="username" required>
                </div>
                <br>
                <div class="contents">
                    <label>密码:</label>
                    <input type="password" name="password" required>
                </div>
                <br>
                <div class="contents">
                    <button type="submit">登录</button>
                </div>

            </form>
        </div>
    </div>
</header>
<!-- 中间部分，放置文章 -->
<main>
    <div class="div_main text-center">
        <div class="grid">
                <div class="p">Value</div>
                <div class="t">Name</div>
                <div class="t">Account</div>
                <div class="t" style="padding-right: 10px">Email</div>
        </div>
        <%! public Connection getConnection() throws SQLException, ClassNotFoundException {
            Class.forName("com.mysql.cj.jdbc.Driver");
            System.out.println("JDBC驱动加载成功！");
            String url = "jdbc:mysql://localhost:3306/users";
            String user = "root";
            String password = "lcw0909.";
            Connection connection = DriverManager.getConnection(url, user, password);
            return connection;
        }%>
        <% ArrayList<Novels> arrayList = new ArrayList<>();
            Connection connection = getConnection();
            String sql1 = "SELECT userName, userEmail, userAccount FROM novelusers";
            PreparedStatement preparedStatement = connection.prepareStatement(sql1);
            ResultSet resultSet = preparedStatement.executeQuery();
            while (resultSet.next()) {
                String userName = resultSet.getString("userName");
                String userEmail = resultSet.getString("userEmail");
                long userAccount = resultSet.getInt("userAccount");

                String sql2 = "SELECT id, value FROM novel where novelUserAccount = " + userAccount;
                PreparedStatement preparedStatementNovel = connection.prepareStatement(sql2);
                ResultSet resultSetNovel = preparedStatementNovel.executeQuery();
                while (resultSetNovel.next()) {
                    String value = resultSetNovel.getString("Value");
                    int id = resultSetNovel.getInt("id");
                    arrayList.add(new Novels(userName, userAccount, userEmail, value, id));
                }
            }%>
        <% for (Novels novels : arrayList) {%>
        <div class="grid">
                <div class="p"><%= novels.getValue()%>
                </div>
                <div class="t"><%= novels.getName()%>
                </div>
                <div class="t"><%= novels.getAccount()%>
                </div>
                <div class="t" style="padding-right: 10px"><%= novels.getEmail()%>
                </div>
                <%--<div class="col">
                    <form action="revise.jsp" method="post">
                        <input type="hidden" name="userid-1" value=<%= managemans.getId()%>>
                        <button type="submit" class="tit1">修改</button>
                    </form>
                </div>
                <div class="col">
                    <form action="Delete" method="post">
                        <input type="hidden" name="userid-0" value=<%= managemans.getId()%>>
                        <button type="submit" class="tit1">删除</button>
                    </form>
                </div>--%>
        </div>
        <%}%>
    </div>
</main>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
        crossorigin="anonymous"></script>
<script>
    // script.js
    document.addEventListener('DOMContentLoaded', function () {
        const loginBtn = document.getElementById('login-btn');
        const loginPopup = document.getElementById('login-popup');
        const closeBtn = document.getElementById('close-btn');
        const loginForm = document.getElementById('login-form');

        loginBtn.addEventListener('click', function () {
            loginPopup.style.display = 'block';
        });

        closeBtn.addEventListener('click', function () {
            loginPopup.style.display = 'none';
        });

        // 点击弹窗外部区域时关闭弹窗
        window.onclick = function (event) {
            if (event.target == loginPopup) {
                loginPopup.style.display = 'none';
            }
        };

    });
</script>
</html>